import React, { useEffect } from 'react'
import logo from '../../logo.svg'
const Index = () => {

  useEffect(()=>{
    const {BMapGL, BMAP_STATUS_SUCCESS, BMAP_ANCHOR_TOP_RIGHT} = window
    var map = new BMapGL.Map("map_main");          // 创建地图实例 
    var point = new BMapGL.Point(120.269453,30.312753);  // 创建点坐标 
    // map.centerAndZoom(point, 10);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    // map.setHeading(64.5);   //设置地图旋转角度
    // map.setTilt(73);       //设置地图的倾斜角度
    // 1.标准地图：BMAP_NORMAL_MAP
    // 2.地球模式：BMAP_EARTH_MAP
    // 3.普通卫星地图：BMAP_SATELLITE_MAP
    // map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);

    const location = new BMapGL.LocationControl( {
      anchor: BMAP_ANCHOR_TOP_RIGHT
  })
    map.addControl(location)


    // map.setMapStyleV2({     
    //   styleId: '8124556b6166dff8d6ecf9b17a936b41'
    // });



  //   var myIcon = new BMapGL.Icon('https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics5.baidu.com%2Ffeed%2Fb151f8198618367a67abcf0f6bfc0dd8b21ce55a.jpeg%40f_auto%3Ftoken%3D35c60666cf2272b955312e1f33c5e964&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1690304400&t=fa0eb7ea0674af88e5117a6f589b7f07', new BMapGL.Size(23, 25), {   
  //     // 指定定位位置。  
  //     // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
  //     // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
  //     // 图标中央下端的尖角位置。   
  //     anchor: new BMapGL.Size(10, 25),   
  //     // 设置图片偏移。  
  //     // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
  //     // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
  //     imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移   
  // });     
  //     // 创建标注对象并添加到地图  
  // var marker = new BMapGL.Marker(point, {icon: myIcon});   
  // map.addOverlay(marker); 



  // 添加覆盖物
  // var polyline = new BMapGL.Polyline([
	// 	new BMapGL.Point(120.269453,30.312753),
	// 	new BMapGL.Point(120.369453,30.412753),
	// 	new BMapGL.Point(120.569453,30.312753),
  //   new BMapGL.Point(120.269453,30.312753),
	// ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
  // map.addOverlay(polyline);


  // 定位当前城市
  // var localcity = new BMapGL.LocalCity();
  // localcity.get(e => {
  //     console.log(e);
  // })


  // 检索
  // map.centerAndZoom(new BMapGL.Point(120.269453,30.312753), 11);
  // map.centerAndZoom(new BMapGL.Point(121.480458,31.22856), 11);
map.centerAndZoom(new BMapGL.Point(120.269453,30.312753), 11);

	var options = {
		onSearchComplete: function(results){
			// 判断状态是否正确
			if (local.getStatus() == BMAP_STATUS_SUCCESS){
				var s = [];
				for (var i = 0; i < results.getCurrentNumPois(); i ++){
					s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
				}
				document.getElementById("r-result").innerHTML = s.join("<br/>");
			}
		}
	};
	var local = new BMapGL.LocalSearch(map, options);
  
	local.search("吃的");

  }, [])
  
  return (
    <div>
      <h1>地图</h1>

      <div style={{height: 500}} id='map_main'></div>
      <div id='r-result'></div>
    </div>
  )
}

export default Index